<template>
    <DrawGridMapAndRoute
        :route="route"
        :column="map.length"
        :row="map[0].length"
        :grid="true"
        :map="map"
    ></DrawGridMapAndRoute>
</template>

<script setup lang="ts">
//@ts-nocheck
import map from "./screen-capture-2023-11-24-162727_result-result-test.json";
import DrawGridMapAndRoute from "./drawGridMapAndRoute.vue";
// import { GridMapFromArray } from "./GridMapFromArray";
// import { drawGridMap } from "./drawGridMap";
// import { onMounted } from "vue";
// import { ref, effect } from "vue";
// // import { useElementSize } from "@vueuse/core";

// import { useWindowSize } from "@vueuse/core";
// import { drawGridRoute } from "./drawGridRoute";
// // const { width, height } = useElementSize(document.body);

// const windowSize = useWindowSize();
// const grid_map_canvas = ref<HTMLCanvasElement>();

// const { column, row } = gridMap;
import route from "./test-route-23-22.json"; //: [number, number][] = ;
// onMounted(() => {
//     render();
// });
// function render() {
//     const canvas = grid_map_canvas.value;
//     if (canvas) {
//         drawGridMap(gridMap, canvas);
//         drawGridRoute(route, canvas, column, row);
//     }
// }
// effect(() => {
//     const canvas = grid_map_canvas.value;
//     if (canvas) {
//         // console.log(width.value, windowSize.width.value, window.innerWidth);
//         // console.log(height.value, windowSize.height.value, window.innerHeight);
//         canvas.width =
//             /* width.value + */

//             (windowSize.width.value + window.innerWidth) / 2;
//         canvas.height =
//             /* height.value + */

//             (windowSize.height.value + window.innerHeight) / 2;

//         render();
//     }
// });
</script>
